/*
 * 组件注释
 * @Author: wuq-l
 * @Date: 2022-09-05 17:22:34
 * @LastEditors: wuq-l
 * @LastEditTime: 2023-01-13 09:42:11
 * @Description: 错误边界
 * 既往不恋！当下不杂！未来不迎！！！
 */
"use strict";
import { Component, ReactElement, PropsWithChildren } from 'react'

// 错误时降级显示的UI组件，props就传个error就可以了，返回就是我们的jsx
type FallbackRender = (props: { error: Error | null }) => ReactElement

export default class ErrorBoundary extends Component<PropsWithChildren<{ fallbackRender: FallbackRender }>, { error: Error | null }> {
    state = {
        error: null, // 默认值 没有错误
    }

    static getDerivedStateFromError(error: Error) {
        return { error };
    }

    render() {
        const { error } = this.state
        const { children, fallbackRender } = this.props
        return error ? fallbackRender({ error }) : children
    }
}
